<template>
  <div class="gauge-thick-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent]);

// Props定义
interface Props {
  value?: number;
  progressWidth?: number;
  progressColor?: string;
  axisLineColor?: string;
  splitLineColor?: string;
  labelColor?: string;
  anchorSize?: number;
  anchorBorderWidth?: number;
  fontSize?: number;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 70,
  progressWidth: 18,
  progressColor: '#409EFF',
  axisLineColor: '#E4E7ED',
  splitLineColor: '#999',
  labelColor: '#999',
  anchorSize: 25,
  anchorBorderWidth: 10,
  fontSize: 80
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  progressWidth: props.progressWidth,
  progressColor: props.progressColor,
  axisLineColor: props.axisLineColor,
  splitLineColor: props.splitLineColor,
  labelColor: props.labelColor,
  anchorSize: props.anchorSize,
  anchorBorderWidth: props.anchorBorderWidth,
  fontSize: props.fontSize
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 宽进度条仪表盘配置
const chartOption = computed(() => {
  const value = componentProps.value.value;
  const progressWidth = componentProps.value.progressWidth;
  const progressColor = componentProps.value.progressColor;
  const axisLineColor = componentProps.value.axisLineColor;
  const splitLineColor = componentProps.value.splitLineColor;
  const labelColor = componentProps.value.labelColor;
  const anchorSize = componentProps.value.anchorSize;
  const anchorBorderWidth = componentProps.value.anchorBorderWidth;
  const fontSize = componentProps.value.fontSize;

  return {
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          width: progressWidth,
          itemStyle: {
            color: progressColor
          }
        },
        axisLine: {
          lineStyle: {
            width: progressWidth,
            color: [[1, axisLineColor]]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          length: 15,
          lineStyle: {
            width: 2,
            color: splitLineColor
          }
        },
        axisLabel: {
          distance: 25,
          color: labelColor,
          fontSize: 20
        },
        anchor: {
          show: true,
          showAbove: true,
          size: anchorSize,
          itemStyle: {
            borderWidth: anchorBorderWidth,
            borderColor: progressColor,
            color: '#fff'
          }
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: fontSize,
          offsetCenter: [0, '70%'],
          color: labelColor
        },
        data: [
          {
            value: value
          }
        ]
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-thick-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-thick-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
